<template>
    <div style="padding: 20px 15px;">
        <el-card style="background-color: #409EFF;color: white;border-radius: 20px;">
            <h1 style="font-size: 18px;text-align: center;">
                欢迎使用 GTenACGN , 这里可能有你喜欢的 ( ◠‿◠ )
            </h1>
        </el-card>

        <el-card style="margin-top: 20px;background-color: rgb(255, 255, 255,0.2);">
            <template #header>
                <span style="font-weight: 700;">漫画推荐</span>
                <div class="extra">
                    <el-button type="text" @click="getRandomCartoonList">
                        <el-icon><RefreshRight /></el-icon>
                        换一批
                    </el-button>
                </div>
            </template>

            <Model :dataList="cartoonList" :Detail="cartoonDetail" :hasFooter="false" :size="12" />
        </el-card>

        <el-card style="margin-top: 20px;background-color: rgb(255, 255, 255,0.2);">
            <template #header>
                <span style="font-weight: 700;">轻小说推荐</span>
                <div class="extra">
                    <el-button type="text" @click="getRandomNovelList">
                        <el-icon><RefreshRight /></el-icon>
                        换一批
                    </el-button>
                </div>
            </template>

            <Model :dataList="novelList" :Detail="novelDetail" :hasFooter="false" :size="12"  />
        </el-card>

    </div>
</template>

<script setup lang="ts">
import Model from '@/components/ModelVue.vue'
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus'
import axios, { HttpStatusCode } from 'axios';
import { useRouter } from 'vue-router';

const router = useRouter();

onMounted(() => {
    getRandomCartoonList();
    getRandomNovelList();
})

// 获取随机的漫画数据
const cartoonList = ref<any[]>([]);
const getRandomCartoonList = async () => {
    try {

        const result = await axios.get('/api/cartoon/randomVo');
        if (result.data.code === HttpStatusCode.Ok) {
            cartoonList.value = result.data.data;
        }
    } catch (error) {
        ElMessage.error({
            showClose: true,
            message: "数据获取失败！！！",
        })
        console.log(error);
    }
}

// 获取随机的漫画数据
const novelList = ref<any[]>([]);
const getRandomNovelList = async () => {
    try {

        const result = await axios.get('/api/novel/randomVo');
        if (result.data.code === HttpStatusCode.Ok) {
            novelList.value = result.data.data;
        }
    } catch (error) {
        ElMessage.error({
            showClose: true,
            message: "数据获取失败！！！",
        })
        console.log(error);
    }
}

const cartoonDetail = (data) => {
    console.log('cid : ' + data.cid);
    router.push({ name: 'cartoonDetail', params: { cid: data.cid } })
}

const novelDetail = function (data) {
    console.log('nid : ' + data.nid);
    router.push({ name: 'novelDetail', params: { nid: data.nid } })
}

</script>

<style scoped>
.extra {
    float: right;
}
</style>